<template>
    <div class="">
        <nav>
          <a href="#/" class="fa fa-angle-left"></a>
          商品管理
          <span @click="xiaoxi">消息({{post.length}})</span>
        </nav>
        <!--{{shops}}-->
        <div class="content">
            
            <ul>
                <li v-for="shop in shops">
                    <!--{{shop}}-->
                    <img :src="`http://localhost:2222/images/photos/${shop.productImage}`" alt="">
                    <div class="nei">
                        <h2> {{shop.name}}<span> {{shop.checked}}</span></h2>
                        <p> {{shop.describe}}</p>
                        <p>原价: <span>¥  {{shop.price}}</span> 现价: <span>¥  {{shop.yuanPrice}}</span></p>
                        <a class="remo" @click.prevent="removes" :taret="`${shop._id}`" href="">删除</a>
                        <a class="upda" :href="'#/upadd/'+ shop._id">修改</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
     import axios from 'axios'
    import { Tabbar, TabbarItem, Group, Cell } from 'vux'
    export default {
        components: {
            Tabbar,
            TabbarItem,
            Group,
            Cell
        },
        data() {
            return {
                datas:'',
                shops:'',
                post:'',
            }
        },
        mounted:function(){
            var that = this;
            axios.get('los/shop').then(function(data){
                that.shops = data.data.message;
            
            }).catch(function(err){
                console.log(err);
            })
            axios.get('los/xiaoxi').then(function(data){
                that.post = data.data.message;
            
            }).catch(function(err){
                console.log(err);
            })
        },
        methods:{
            removes:function(ev){
                var haa = $(ev.currentTarget).attr('taret')
                console.log(haa)
                axios.get(`los/removes?id=${haa}`)
                .then(function(data){
                    location.reload();
                }).catch(function(err){
                })
            },
            xiaoxi:function(){
                location.href = '/#/xiaoxi'
            }
        }
    }
</script>
<style scoped>
    nav > span{
        position: absolute;
        right: 10px;
    }
    .nei a{
        position: absolute;
        right: 10px;
        color: #fff;
        border-radius: 3px;
        padding: 0 4px;
    }
    .remo{
         background: #cc0000;
         top: 15px;
    }
    .upda{
        background: #4682B4;
        top: 62px;
    }
    .nei > p {
        font-size: 12px;
    }
    .nei > p > span{
        color: #cc0000;
        font-size: 16px;
    }
    .nei{
        float: left;
        font-size: 14px;
        width: 180px;
    }
    .nei h2{
        font-size: 16px;
        font-weight: 500;
    }
    .nei h2 span{
        font-size: 14px;
        margin-left: 15px;
    }
    li img{
        float: left;
        width: 25%;
        margin-right: 15px;
    }
    li{
        overflow: hidden;
        padding: 10px;
        position: relative;
        border-bottom: 10px solid #ccc;
    }
    .content{
        margin-top: 45px;
    }
   nav{
     line-height: 45px;
     text-align: center;
     border-bottom: 1px solid #ddd;
     position: fixed;
     z-index: 666;
     top: 0;
     left: 0;
     right: 0;
     background: #FA8072;
     color: #fff;
 }
 nav > a{
    position: absolute;
    left: 20px;
    font-size: 30px;
    top: 6px;
    color: #fff;
 }
  
    
</style>